<template>
	<view>
		<u-popup :show="showLogin" round="10">
			<view class="alert">
				<view class="title">小程序代理商服务</view>
				<view class="role">
					欢迎您使用小程序，为更好的保护您的个人信息安全，请阅读并同意
				</view>
				<button @getphonenumber="getPhone" open-type="getPhoneNumber" class="btn_login x-btn">手机号快捷登陆</button>
				<view class="not_login" @click="cancelLogin">暂不登录</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
		import {login} from '@/api/login.js'
	import {
		ThemeMixin
	} from '@/mixins/theme/xThemeMixin.js'
	export default {
		mixins: [ThemeMixin],
		components: {},
		props: {
			showLogin: {
				type: Boolean,
				default () {
					return false
				}
			},
			form: {
				type: Object,
				default () {
					return {
						
					}
				}
			},
		},
		data() {
			return {
				checkPrivateInfo: false,
				checkMemberInfo: false,
			}
		},

		methods: {
			onMemberServiceProtocol() {
				uni.navigateTo({
					url: '/pages/protocol/protocol?id=MEMBER_SERVER_PROTOCOL&title=会员服务协议'
				})
			},
			onPrivateInfoProtocol() {
				uni.navigateTo({
					url: '/pages/protocol/protocol?id=PERSONAL_PROTOCOL&title=个人信息保护协议'
				})
			},
			onPrivateInfoChange(e) {
				this.checkPrivateInfo = e.detail.value[0]
			},
			onMemberInfoChange(e) {
				this.checkMemberInfo = e.detail.value[0]
			},

			onLogin() {
				
				if (!this.checkMemberInfo) {
					uni.showToast({
						icon:'none',
						title:'请阅读并同意《同意会员服务协议》'
					})
					return;
				}
				if (!this.checkPrivateInfo) {
					uni.showToast({
						icon:'none',
						title:'请阅读并同意《个人信息保护协议》'
					})
					return;
				}
				
			},
			getPhone(e){
				uni.login({
					success:res=>{
						login({
							code:e.detail.code,
							loginCode:res.code,
							password:this.form.password,
							loginName:this.form.loginName,
						}).then(success=>{
							
							this.$store.commit('setToken', success.authorization)
							this.$store.commit('SET_USER_INFO', success)
							this.$emit('loginSuccess',res)
							this.cancelLogin()
						}).catch(err=>{
							console.log('catch',err)
							uni.showToast({
								title:err.message,
								duration:10000,
								icon:'none'
							})
						})
					},
					fail:f=>{
						console.log('登录失败',f)
						uni.showToast({
							title:'fail:'+f,
							duration:10000,
							icon:'none'
						})
					}
				})
				
			},
			cancelLogin() {
				this.$emit('cancelLogin')
			},
		}
	}
</script>

<style lang="scss" scoped>
		.alert {
			width: 100%;
			padding: 20rpx 40rpx;
		}

		.title {
			font-size: 34rpx;
			padding: 20rpx 0;
		}

		.role {
			margin: 0 auto;
			font-size: 28rpx;

			.private-info,
			.member-info,
			.privacy-info {
				display: flex;
				align-items: center;
				color: $x-theme-color;
				margin-top: 20rpx;

				.protocol-prefix {
					margin-left: 10rpx;
				}

				.protocol {
					text-decoration: underline;
					text-decoration-color: #515151;
				}
			}

		}

		.btn_login {
			width: 100%;
			height: 90rpx;
			margin: 40rpx auto;
			border-radius: 6rpx;
		}

		.text_red {
			color: #fc4e27;
		}

		.not_login {
			font-size: 28rpx;
			color: #515151;
			text-align: center;
		}
</style>